<template>
  <a-modal :title="title" :width="1000" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" v-if="record != null">
        <a-row>
          <a-col :span="14">
            <a-row>
              <a-col :span="24">
                <div class="title">基础信息</div>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标题">
                  {{record.conContentTemplate.contentTitle}}
                </a-form-item>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联合撰稿人">
                  {{record.unionPeople}}
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <div class="title">质量信息</div>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="文章质量">
                  <a-select :default-value="0" v-model="record.conContentPerformance.articleQuality" style="width: 100%">
                    <a-select-option :value='0'>请选择文章质量</a-select-option>
                    <a-select-option :value='4'>优秀</a-select-option>
                    <a-select-option :value='3'>良好</a-select-option>
                    <a-select-option :value='2'>中等</a-select-option>
                    <a-select-option :value='1'>较差</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <div class="title">传播信息</div>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="引力波登载状态">
                  {{landingType}}
                </a-form-item>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="纸媒登载版面">
                  <a-radio-group :options="plainOptions" default-value="1" @change="onSelectUrl" v-model="isPaperIn" />
                  <div class="url-inputer" v-if="showUrlInputer">
                    <a-input disabled placeholder="请输入登载的版面" v-model="record.conContentPerformance.paperTitle" />
                    <a-input hidden v-model="record.conContentPerformance.paperId" />
                    <a href="javascript:;" @click="chooseArticle">选择关联文章>></a>
                  </div>
                </a-form-item>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="传播绩效得分">
                  <a-input v-model="record.conContentPerformance.score" />
                </a-form-item>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
                  <a-textarea placeholder="备注" v-model="record.conContentPerformance.remark" :auto-size="{ minRows: 3 }" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="10">
            <div class="phoneContent">
              <div class="srcllo">
                <div class="article-detail">
                  <img :src="previewContent.mbLogoUrl" />
                  <div class="article-detail-title">{{previewContent.contentTitle}}</div>
                  <div class="article-detail-author" style="justify-content: space-between;">
                    <div style="display:flex">
                      <div>
                        <img v-if="!previewContent.headPhoto" src="~@/assets/wbdefault.png" />
                        <img v-if="previewContent.headPhoto" :src="previewContent.headPhoto" />
                      </div>
                      <div>
                        <div class="name">{{record.unionPeople}}</div>
                        <div class="date">{{previewContent.createTime}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="article-detail-tip1" v-if="previewContent.contentIntroduce">{{previewContent.contentIntroduce}}
                  </div>
                  <div class="article-detail-content" v-if="previewContent.content" v-html="previewContent.content"></div>
                  <div class="article-detail-video">
                    <video controls v-if="previewContent.videoUrl" style="width: 100%; height: 200px;">
                      <source :src="previewContent.videoUrl" />
                    </video>
                  </div>
                  <div class="article-detail-voice" v-if="previewContent.voiceUrl"></div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <choose-relation-article ref="articleChoose" @onSelect="articleRelationSelected"></choose-relation-article>
  </a-modal>
</template>
<script>
import { getAction, httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import { validateDuplicateValue } from '@/utils/util'
import ChooseRelationArticle from './ChooseRelationArticle'

export default {
  name: 'ArticlePerEditModel',
  components: {
    ChooseRelationArticle,
  },
  data() {
    return {
      record: null,
      title: '详情',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: this.$form.createForm(this),
      confirmLoading: false,
      url: {
        add: '/pump/pumpStation/add',
        edit: '/pump/pumpStation/edit',
      },
      plainOptions: [{ label: '未登载', value: '1' }, { label: '已登载', value: '2' }],
      showFixedWages: false,
      previewContent: {},
      showUrlInputer: false,
      landingType: '',
      relationArticle: '',
      isPaperIn: '1',
    }
  },
  methods: {
    edit(record, realname) {
      this.record = record
      this.record.conContentTemplate.authorName = realname
      this.previewContent = record.conContentTemplate
      if (this.record.unionPeople == 'null') {
        this.record.unionPeople = '无'
      }
      switch (record.conContentPerformance.landingType) {
        case 1:
          this.landingType = '未登载'
          break
        case 2:
          this.landingType = '引力波登载'
          break
        case 3:
          this.landingType = '纸媒登载'
          break
        case 4:
          this.landingType = '全媒登载'
          break
        default:
          break
      }
      this.visible = true
      this.isPaperIn = record.conContentPerformance.paperId ? '2' : '1'
      this.showUrlInputer = this.isPaperIn == '2'
      console.log(record)
    },
    close() {
      this.$emit('ok')
      this.visible = false
    },

    handleOk() {
      const that = this
      httpAction('/content/contentPerformance/edit', this.record.conContentPerformance, 'put').then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('ok')
          this.visible = false
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleCancel() {
      this.close()
    },
    onSelectUrl(e) {
      this.showUrlInputer = e.target.value == '2'
    },
    chooseArticle() {
      this.$refs.articleChoose.show()
    },
    articleRelationSelected(r) {
      this.$set(this.record.conContentPerformance, 'paperId', r.id)
      this.$set(this.record.conContentPerformance, 'paperTitle', r.title)
    },
  },
  created() {},
}
</script>

<style lang="less" scoped>
.list {
  display: flex;
  align-items: center;
}
.title {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}
.ant-form-item {
  margin-bottom: 3px;
}
/deep/.search-box-wrapper {
  background-color: #ededed;
  input {
    background-color: #ededed;
  }
}
.search-box {
  margin-bottom: 10px;
}
.address {
  padding-top: 10px;
  span:nth-child(1) {
    color: #333;
    font-weight: bold;
    margin-right: 10px;
  }
}
.phoneContent {
  background-color: #f4f7f9;
  height: 450px;

  .srcllo {
    height: 450px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .content-title {
    color: #000000;
    font-size: 26px;
    line-height: 2;
  }

  .content-list {
    color: #000;
    font-size: 18px;
    line-height: 1.7;
    margin-top: 20px;

    img {
      width: 100%;
      height: 255px;
      margin: 20px 0;
    }
  }
  .article-detail {
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
    overflow-y: scroll;
    padding-bottom: 60px;

    & > * {
      margin-bottom: 20px;
    }

    & > img {
      width: 100%;
    }

    &-title {
      font-size: 20px;
      color: #333;
    }

    &-author {
      display: flex;
      align-items: center;
      color: #333;

      img {
        width: 34px;
        height: 34px;
        margin-right: 6px;
        border-radius: 50%;
      }

      .date {
        color: #b6b6b6;
        margin-top: 2px;
      }
    }

    &-tip1 {
      padding: 20px;
      color: #666666;
      background: rgba(246, 246, 246, 1);
      border-radius: 4px;
    }

    &-tip2 {
      padding: 20px;
      color: #b6b6b6;
      background: rgba(246, 246, 246, 1);
      border-radius: 4px;
      display: flex;
      align-items: center;

      img {
        width: 34px;
        height: 34px;
        margin-right: 6px;
        border-radius: 50%;
      }

      .name {
        color: #000;
        margin-bottom: 6px;
      }
    }

    &-comment {
      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          font-size: 18px;
        }

        .all {
          font-size: 12px;
          color: #666666;
        }
      }
    }

    &-toolbar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 8px 16px;
      background-color: #fff;
      box-sizing: border-box;
      margin-bottom: 0;

      & > span {
        margin-right: 20px;
        margin-left: 2px;
      }

      img {
        width: 20px;
      }

      &-comment {
        width: 130px;
        height: 36px;
        line-height: 36px;
        border-radius: 36px;
        color: #999999;
        background: #e4e4e4;
        margin-left: auto;
        padding-left: 16px;
        box-sizing: border-box;
      }
    }

    .replay-modal {
      height: 100vh;
      width: 100vw;
      padding: 16px;
      box-sizing: border-box;

      &-title {
        display: flex;
        justify-content: space-between;
        padding-bottom: 16px;
        border-bottom: 1px solid #f5f5f5;

        & > div:first-child {
          color: #999999;
        }
      }
    }
  }
}

.url-inputer {
  text-align: right;
}
</style>
